<template>
  <view class="app-container">
    <view class="header">
      <view class="u-nav-slot" @click="handleShowSidebar">
        <!-- <view class="iconfont icon-31liebiao icon-color"></view> -->
        <view class="back-icon" style=""></view>
      </view>
      <view class="header__center">
        <u-tabs
          :list="list1"
          @change="changeTab"
          lineColor="#61BDB2"
          lineWidth="60rpx"
          lineHeight="8rpx"
          :itemStyle="{
            padding: '22rpx 30rpx',
            'font-size': '32px',
            'font-family': 'HarmonyOS Sans-Medium, HarmonyOS Sans',
          }"
          :activeStyle="{ 'font-weight': '500', color: '#000000' }"
          :inactiveStyle="{ 'font-weight': '500', color: '#878787' }"
        >
        </u-tabs>
      </view>

      <view class="header__right">
        <image
          src="@/static/image/bourse/bangzhu.png"
          mode=""
          style="width: 42rpx; height: 42rpx; margin-right: 20rpx"
          @click.stop="doHelpHandle"
        ></image>
        <view
          class="iconfont icon-bianji"
          @click.stop="clickRightHandle"
        ></view>
      </view>
    </view>

    <view class="content">
      <Recharge ref="Recharge" v-if="tabType == 'recharge'"></Recharge>
      <Exchage ref="Exchage" v-if="tabType == 'exchange'"></Exchage>
    </view>
    <SidebarModule :show="showSidebar" @closeSidebar="handleCloseSidebar" />
  </view>
</template>

<script>
import { mapState } from "vuex";
import SidebarModule from "../../components/SidebarModule.vue";
import Recharge from "./Recharge.vue";
import Exchage from "./Exchage.vue";
export default {
  data() {
    return {
      tabType: "recharge",
      urlIndex: "jyzxBourse",
      showSidebar: false,
    };
  },
  computed: {
    ...mapState(["token"]),
    list1() {
      return [
        {
          name: this.$t("order.Recharge"),
          type: "recharge",
        },
        {
          name: this.$t("discover.exchange"),
          type: "exchange",
        },
      ];
    },
  },
  components: {
    Recharge,
    Exchage,
    SidebarModule,
  },
  onShow() {
    this.getPrePages(this.urlIndex); // 获取上一个页面的路径已经参数
    if (this.tabType == "recharge") {
      this.$refs?.Recharge?._getCurrencyList();
    } else if (this.tabType == "exchange") {
      this.$refs?.Exchage?._getCurrencyList();
    }
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === "navigateBack") {
      return false;
    }
    this.leftClick(this.urlIndex);
    // this.goBack();
    return true;
  },
  methods: {
    // 侧边栏
    handleShowSidebar() {
      // this.showSidebar = true;
      uni.navigateBack();
    },
    handleCloseSidebar() {
      this.showSidebar = false;
    },
    goback() {
      uni.redirectTo({
        url: "/pagesUser/wallet/Wallet",
      });
    },
    // 点击右侧
    clickRightHandle() {
      if (this.token) {
        uni.navigateTo({
          url: "/pagesUser/bourse/release",
        });
      } else {
        uni.navigateTo({
          url: "/pages/login/Login",
        });
      }
    },
    doHelpHandle() {
      // 预览图片
      uni.previewImage({
        urls: ["https://www.omlook.com/imol/help.png"],
        // longPressActions: {
        // 	itemList: ['发送给朋友', '保存图片', '收藏'],
        // 	success: function(data) {
        // 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
        // 	},
        // 	fail: function(err) {
        // 		console.log(err.errMsg);
        // 	}
        // }
      });
    },
    // 修改标签选项
    changeTab(item) {
      this.tabType = item.type;
    },
  },
};
</script>

<style lang="scss" scoped>
.back-icon {
  width: 19upx;
  height: 19upx;
  border-bottom: 2upx solid #202020;
  border-left: 2upx solid #202020;
  transform-origin: center center;
  transform: rotate(45deg);
  margin-left: 16upx;
}
.header__right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-color {
  color: #61bdb2;
  font-size: 40upx;
}

.u-nav-slot {
  padding: 0 13px;
}

.app-container {
  height: calc(100vh);
  background-color: #f6f6f6;

  .header {
    display: flex;
    align-items: center;
    height: 44px;
    margin-top: var(--status-bar-height);

    &__left,
    &__right {
      flex: 0 0 0;
    }

    &__left {
      .icon-jiantou-zuo {
        font-size: 50rpx;
        margin-left: 34rpx;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 500;
      }
    }

    &__right {
      text-align: right;

      .icon-bianji {
        font-size: 38rpx;
        margin-right: 10rpx;
        color: #61bdb2;
      }
    }

    &__center {
      flex: 1;
      display: flex;
      justify-content: center;
    }
  }

  .content {
    height: calc(100vh - 44px - var(--status-bar-height) - 30rpx);
    background: #ffffff;
    border-radius: 50rpx 50rpx 0 0;
    margin-top: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
  }
}
</style>
